<template>
  <div class="star" :class="'star-'+starSize">
    <!-- starClass:星星根据商户评级显示几颗星([通过星星类名来显示星星状态]满星on，半星half，空星off) -->
    <span class="star-item" v-for="(starClass, index) in starClasses" :key="index" :class="starClass"></span>
  </div>
</template>

<script>
export default {
  props: {
    // 星星大小
    starSize: Number,
    // 商家评分
    rating: Number
  },
  computed: {
    starClasses () {
      const {rating} = this
      const scs = [] // 存放星星类名数组
      let on = Math.floor(rating) // on：满星显示个数 = 评分的个位数， 向下取整(去小数位)
      for (let index = 0; index < on; index++) {
        scs.push('on') // 星星类名数组中放入指定个数的满星on
      }
      if ((rating * 10 - on * 10) >= 5) { // 半星显示规则[四舍五入]：小数位>0.5取一颗，小于0.5零颗。【考虑小数精度问题，*10变整数】
        scs.push('half')
      }
      while (scs.length < 5) { // 一共5颗星，剩下的就是空星
        scs.push('off')
      }
      return scs
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/mixins.styl"
              .star //2x图 3x图
                float left
                font-size 0
                .star-item
                  display inline-block
                  background-repeat no-repeat
                &.star-48
                  .star-item
                    width 20px
                    height 20px
                    margin-right 22px
                    background-size 20px 20px
                    &:last-child
                      margin-right: 0
                    &.on
                      bg-image('./images/stars/star48_on')
                    &.half
                      bg-image('./images/stars/star48_half')
                    &.off
                      bg-image('./images/stars/star48_off')
                &.star-36
                  .star-item
                    width 15px
                    height 15px
                    margin-right 6px
                    background-size 15px 15px
                    &:last-child
                      margin-right 0
                    &.on
                      bg-image('./images/stars/star36_on')
                    &.half
                      bg-image('./images/stars/star36_half')
                    &.off
                      bg-image('./images/stars/star36_off')
                &.star-24
                  .star-item
                    width 10px
                    height 10px
                    margin-right 3px
                    background-size 10px 10px
                    &:last-child
                      margin-right 0
                    &.on
                      bg-image('./images/stars/star24_on')
                    &.half
                      bg-image('./images/stars/star24_half')
                    &.off
                      bg-image('./images/stars/star24_off')
</style>
